<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
		<style type="text/css">
			.lbUsername {
				color: #9ACD32;
			}
		</style>
	</head>
	<body>
		<!-- 表单的作用就是用来将用户的信息提交给服务器的 -->

		<!--
			使用form标签创建表单
			
				form标签中必须指定一个action属性，指向的是服务器的地址，
				当我们提交表单时，会提交到action对应的地址
		 -->
		<form action="page1.html">
			<!-- 
				使用form创建的是一个空白的表单，
					还需要向form中添加不同的表单项
			 -->

			<!-- fieldset用来拆分表单项分组
				可以将表单项中的同一组，放到一个fieldset
			  -->
			<fieldset id="">
				
				<!-- 在fieldset可以使用legend字标签来指定组名 -->
				<legend>用户信息</legend>
				
				
				<!--
			 	  使用input来创建一个文本框，它的type属性必须指定
			 	  
			 	  如果希望表单项的数据会提交到服务器，还需要给表单项指定一个name属性
			 	  name表示提交内容的名字
			 	  
			 	  用户填写的信息会附在url地址的后面以查询字符串的形式发送给服务器
			 	  url地址?查询字符串
			 	  格式：
			 		属性名=属性值&属性名=属性值&属性名=属性值&属性名=属性值
			 	  -->

				<!--
			 		label标签，专门用来选中表单中的提示文字，而且可以通过css设置样式
			 		该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值
			 		这样点击label时，就相当于点击了指定的表单项，等价于扩大了表单项的可点击范围
			 	  -->
				<label class="lbUsername" for="usermame">用户名：</label>
				<input type="text" name="username" id="usermame" /><br><br>

				<!-- 
			 		密码框
			 			- 使用input创建一个密码框，它的type属性值是password
			 	  -->
				<label>密码：</label>
				<input type="password" name="pwd" />

			</fieldset>
			<br><br>
			<fieldset id="">
				<legend>用户信息2</legend>
				
				<!--
					单选按钮
						- 使用input来创建单选按钮，它的type属性使用radio
						- 单选根据name属性分组，相同name分为一组
						- 同一组里面的每一项，用value属性来区别，被选中的value属性值将被提交给服务器
						- 使用checked="checked"属性，就可以添加默认值
				  -->
				<label>性别：</label>
				<input type="radio" name="gender" value="1" checked="checked" id="male" /><label for="male">男</label>
				<input type="radio" name="gender" value="2" id="female" /><label for="female">女</label>
				<br><br>

				<!--
					多选框
						- 用input来创建多选框，type属性用checkbox
				-->
				<label>爱好：</label>
				<input type="checkbox" name="hobby" value="1" />足球
				<input type="checkbox" name="hobby" value="2" />篮球
				<input type="checkbox" name="hobby" value="3" />羽毛球
				<input type="checkbox" name="hobby" value="4" />乒乓球
				<br><br>

				<!-- 
					下拉列表：
						- 使用select来创建下拉列表
						 下拉列表的那么属性需要制定给select，而value属性制定给option
						 可以通过在option中指定selected="selected"设置默认
				 -->
				<label>喜欢的明星：</label>
				<select name="star">

					<!-- 在select中可以使用optgroup对选项分组，同一个group是一组-->
					<optgroup label="电影明星">
						<option value="1">成龙</option>
						<option value="2">杰森斯坦森</option>
						<option value="3">巨石强森</option>
					</optgroup>

					<optgroup label="喜剧演员">
						<option value="4">沈腾</option>
						<option value="5">德云社成员</option>
					</optgroup>

				</select>
				<br><br>

				<!-- 使用textarea 创建一个文本域-->

				<label>自我介绍：</label>
				<textarea name="info" rows="5" cols="20"></textarea>

			</fieldset>
			<br><br>

			<!-- 使用input type=button可以用来创建一个单纯的按钮
				
				这个按钮只能被点击，没有任何功能，通常结合js，实现更多功能
			 -->
			<input type="button" value="点击" />

			<br><br>
			<!-- 提交按钮可以将表单中的信息提交给服务器
				使用input创建一个提交按钮
				value，指定提交按钮上的文字
			  -->
			<input type="submit" value="提交" />

			<!-- reset，创建重置按钮，点击重置，表单内容将恢复默认值 -->
			<input type="reset" value="重置" />

			<br><br>
			<!-- 也可以使用button，type默认submit，推荐使用这种方式，更灵活，可以设置样式-->
			<button type="submit">提交</button>
			<button type="reset">重置</button>
			<button type="button">按钮</button>
		</form>
	</body>
</html>
